<template>
    <div>
        <!-- 日期选择器 -->
        <div>
            <el-row>
                <el-col :span="21">
                    <el-form-item label="请选择查询日期">
                        <el-date-picker
                                        v-model="searchDates"
                                        type="daterange"
                                        range-separator="To"
                                        value-format="YYYY-MM-DD"
                                        start-placeholder="开始日期"
                                        end-placeholder="截止日期"
                                        />
                    </el-form-item>
                </el-col>
                <el-col :span="3" style="padding-left:10px">
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                </el-col>
            </el-row>
        </div>
        <div>
            <!-- 定义一个div 当做显示echarts图表的容器 -->
            <el-row>
                <el-col :span="12">
                    <div ref="main1" style="width: 100%;height:400px;"></div>
                </el-col>
                <el-col :span="12">
                    <div ref="main2" style="width: 100%;height:400px;"></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { getOrderStatistics } from '@/api/orderStatistics'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const searchDates=ref([])
const handleSearch=async()=>{
    if(searchDates.value && searchDates.value.length===2){
        const{data}=await getOrderStatistics(searchDates.value[0],searchDates.value[1])
        initEcharts(main1.value,data.dates,data.totalAmounts,'每日订单金额','line')
        initEcharts(main2.value,data.dates,data.totalNums,'每日订单数量','bar')
    }else{
        ElMessage.warning('请选择查询的时间')
    } 
}
const main1=ref({})
const main2=ref({})
const initEcharts = (chartDom, xData, xValues, subtext, type) => {
        var myChart = echarts.init(chartDom)
        var option = {
            title: {
                text: '订单统计数据',
                subtext,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: [
                {
                    type: 'category',
                    data: xData,
                    axisTick: {
                        alignWithLabel: true,
                    },
                },
            ],
            yAxis: [
                {
                    type: 'value',
                },
            ],
            series: [
                {
                    name: 'Direct',
                    type,
                    barWidth: '60%',
                    data: xValues,
                },
            ],
        }
         myChart.setOption(option)
    }
</script>